<template>
    <div class="app-container">
        <!-- 搜索 -->
        <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true">
            <el-form-item label="井名" prop="wellName">
                <el-input v-model="queryParams.wellName" placeholder="井名" size="small" style="width: 240px"
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="日期范围" prop="dateRange">
                <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开钻日期"
                    end-placeholder="完井日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 按钮 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button v-hasPermi="['admin:budget:channel:detail:add:post']" type="primary" plain icon="el-icon-upload"
                    size="mini" @click="handleAdd">新增
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button v-hasPermi="['admin:budget:channel:detail:edit:post']" type="success" plain icon="el-icon-edit" size="mini"
                    :disabled="single" @click="handleUpdate">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button v-hasPermi="['admin:budget:channel:detail:add:post', 'admin:budget:channel:detail:edit:post']" type="info" plain icon="el-icon-delete"
                    size="mini" :disabled="multiple" @click="handleSave">保存
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button v-hasPermi="['admin:budget:channel:detail:delete:post']" type="danger" plain icon="el-icon-delete"
                    size="mini" :disabled="multiple" @click="handleDelete">删除
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button v-hasPermi="['admin:budget:form:delete:{id}:delete']" type="warning" plain icon="el-icon-delete"
                    size="mini" @click="getList">刷新
                </el-button>
            </el-col>
            <right-toolbar :show-search.sync="showSearch" @queryTable="getList"/>
        </el-row>
        <!-- table展示 -->
        <dynamic-table ref="dynamicTable" :table-data="tableRowData" :table-header="tableColData" :table-total="tableTotal"
            v-loading="loading" :selection="true" @dynamicMultipleSelection_="dynamicMultipleSelection"
            @dynamicMultiplePaging_="dynamicMultiplePaging"></dynamic-table>
    </div>
</template>

<script>

import { listType, addType, editType, delType } from "@/api/vadmin/budget/channel/dataapi";
import DynamicTable from "@/components/MultistageHeader/index";
import { Decrypt, Encrypt, HmacMD5 } from "@/utils/AesHmacMD5";

export default {
    components: { DynamicTable },
    watch: {
        multipleSelection(newVal, oldVal) {
            if (newVal.length > 0) {
                this.multiple = false
            } else {
                this.multiple = true
            }
            if (newVal.length == 1) {
                this.single = false
            } else {
                this.single = true
            }
        },
        loading(newVal, oldVal) {  // 重新刷新table表单防止表单展示不完整
            if (!newVal) {
                this.refresh()
            }
        }
    },
    created() {
        this.fileId = this.$route.params && this.$route.params.id
        this.formId = this.$route.params && this.$route.params.budget_id
        this.getList();
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 表头
            tableColData: [],
            // 表内容
            tableRowData: [],
            // 数据总量
            tableTotal: 0,
            // 子叶
            treeCotyledon: [],
            // 选择的数据
            multipleSelection: [],
            // 文件ID
            fileId: undefined,
            //表格数据
            tableData: [],
            // 模板ID
            formId: undefined,
            // 判断是新增还是修改 true 新增 false修改
            bolAddOrEdit: true,
            // 显示搜索条件
            showSearch: true,
            // 日期范围
            dateRange: [],
            // 查询参数
            queryParams: {
                pageNum: 1,  // 当前页数
                pageSize: 10,  // 每页显示几个
                wellName: undefined
            },
        }
    },
    methods: {
        // 新增
        handleAdd() {
            this.bolAddOrEdit = true
            var dict = {}
            this.treeCotyledon.forEach(function (value, index, obj) {
                dict[value] = ''
            })
            dict['$isEdit'] = true
            this.tableRowData.unshift(dict)
            this.$refs.dynamicTable.toggleSelection(dict)
        },

        // 修改
        handleUpdate() {
            this.bolAddOrEdit = false
            var index = this.tableRowData.indexOf(this.multipleSelection[0])
            this.tableRowData[index]['$isEdit'] = true
            this.refresh().then(response => { this.$refs.dynamicTable.toggleSelection(this.multipleSelection[0]) })
        },

        // 删除
        handleDelete() {
            var _this = this
            this.$confirm('是否确认删除该数据项?', "警告", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function () {
                return delType({ 'data': _this.multipleSelection });
            }).then(() => {
                this.multipleSelection = []
                this.getList();
                this.msgSuccess("删除成功");
            });
        },
        // 保存
        handleSave() {
            if (this.bolAddOrEdit) {
                addType({ 'fileId': this.fileId, 'data': this.multipleSelection }).finally(fin => {
                    this.multipleSelection = []
                    this.getList()
                })
            } else {
                editType({ 'data': this.multipleSelection }).finally(fin => {
                    this.multipleSelection = []
                    this.getList()
                })
            }
        },

        // 获取模板表头
        getList() {
            this.loading = true
            listType({ 'fileId': this.fileId, 'formId': this.formId, 'queryParams': this.queryParams, 'dateRange': this.dateRange }).then(response => {
                var resData = JSON.parse(Decrypt(response.data))
                this.tableColData = resData.tableColData;
                this.tableRowData = resData.tableRowData
                this.tableTotal = resData.tableTotal
                this.loading = false;
            }).catch(error => {
                this.loading = false;
            });
        },show() {
            
        },

        // 选择更改
        dynamicMultipleSelection(val) {
            this.multipleSelection = val
        },

        // 分页查询
        dynamicMultiplePaging(val) {
            this.loading = true
            this.queryParams.pageNum = val.pageNum
            this.queryParams.pageSize = val.pageSize
            this.refresh().then(response => { this.getList() })
        },

        // 刷新Table表格
        async refresh() {
            this.$refs.dynamicTable.itemKey = this.$refs.dynamicTable.itemKey + 1
        },

        // 重新给table赋值
        assignment_m(value) {
            this.tableRowData = value
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },

        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
    }
}
</script>
